<script setup lang="ts">
import { reactive, ref, toRefs } from 'vue'

const webviewRef = ref()

const data = reactive({
  currentUrl: 'https://bing.com'
})
const { currentUrl } = toRefs(data)

// webview加载开始
const webviewStartLoad = (): void => {
  console.log('webview加载开始')
}

// webview加载完毕
const webviewEndLoad = (): void => {
  console.log('webview加载完毕')
}

// webview页面title改变
const webviewTitleUpdated = (e): void => {
  console.log('webview页面title改变', e.title)
}

// webview页面favicon改变
const webviewFaviconUpdated = (e): void => {
  console.log('webview页面favicon改变', e.favicons[0])
}

// webview后退
const goBackWebView = (): void => {
  webviewRef.value.goBack()
}

// webview前进
const goForwardWebView = (): void => {
  webviewRef.value.goForward()
}

// webview重载
const reloadWebView = (): void => {
  webviewRef.value.reload()
}

// 在浏览器打开应用
const openInBrowser = (): void => {
  window.open(data.currentUrl)
}
</script>

<template>
  <div class="app">
    <div class="console">
      <button @click="goBackWebView">后退</button>
      <button @click="goForwardWebView">前进</button>
      <button @click="reloadWebView">刷新</button>
      <button @click="openInBrowser">默认浏览器打开</button>
    </div>
    <webview
      ref="webviewRef"
      class="webview"
      :src="currentUrl"
      :allowpopups="true"
      @did-start-loading="webviewStartLoad"
      @did-stop-loading="webviewEndLoad"
      @page-title-updated="webviewTitleUpdated"
      @page-favicon-updated="webviewFaviconUpdated"
    ></webview>
  </div>
</template>

<style lang="less">
body {
  margin: 0;
  padding: 0;
}

.app {
  height: 100vh;
  width: 100vw;

  .console {
    height: 30px;
    background-color: #d8e5ea;
    box-sizing: border-box;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }

  .webview {
    height: calc(100% - 30px);
    width: 100%;
  }
}
</style>
